import { ComponentType } from 'react'
import Taro, { PureComponent, Config, useState } from '@tarojs/taro'
import { View, Picker } from '@tarojs/components'
import { AtInput, AtImagePicker, AtButton } from "taro-ui"
import { observer, inject } from '@tarojs/mobx'
import { CommonEvent } from '@tarojs/components/types/common'
import { File } from 'src/store/file'

import './index.scss'

type PageStateProps = {
  indexStore: {
    scanUrl: string
  }
  detailStore: {
    detailData: any,
    check_user: string,
    check_date: string,
    btnOn: boolean,
    getDetail: Function,
    submit: Function,
    clear: Function,
  }
  fileStore: {
    files: File[],
    uploadImg: Function,
    preview: Function,
    clear: Function,
  }
}

interface Index {
  props: PageStateProps;
}


@inject('indexStore', 'detailStore', 'fileStore')
@observer
class Index extends PureComponent {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '工具详情'
  }

  componentWillMount(): void {
    const { indexStore, detailStore } = this.props
    detailStore.getDetail(indexStore.scanUrl || 'https://project.weitip.com/index/tool/info/id/2')
  }

  componentWillUnmount() {
    this.props.detailStore.clear()
    this.props.fileStore.clear()
  }

  onTimeChange(e: CommonEvent) {
    const { detailStore } = this.props
    detailStore.check_date = e.detail.value
  }


  submit() {
    const { files } = this.props.fileStore
    const imgs = files.map(item => item.originalUrl).join(',')
    this.props.detailStore.submit({ file: imgs })
  }

  render() {
    const { detailStore, fileStore } = this.props
    const { detailData, check_user, check_date, btnOn } = detailStore
    const { files } = fileStore
    const btnDisabled = btnOn || files.length === 0
    return (
      <View className='wrapper'>
        <View className='custom-list-wrap'>
          <View className='over-layer'>
            <AtInput title='名称' value={detailData.name} />
          </View>
          <View className='over-layer'>
            <AtInput title='单位' value={detailData.production_unit} />
          </View>
          <View className='over-layer'>
            <AtInput title='负责人' value={detailData.charge} />
          </View>
          <View className='over-layer'>
            <AtInput title='检验人' value={detailData.check_user} />
          </View>
          <View className='list-item over-layer'>
            <View className='list-title'>有效期</View>
            <View className='list-value'>{detailData.validity_start}</View>
            <View className='split'>至</View>
            <View className='list-value'>{detailData.validity_end}</View>
          </View>
          <View className='over-layer'>
            <AtInput title='检验期' value={detailData.check_date} />
          </View>
          <View className='input-wrap'>
            <AtInput
              title='专业验收人'
              value={check_user}
              placeholder='请输入专业验收人'
              onChange={(value: string) => detailStore.check_user = value}
            />
          </View>
          <View className='input-wrap'>
            <Picker mode='date' onChange={this.onTimeChange.bind(this)}>
              <AtInput title='验收期' value={check_date} placeholder='请选择验收期' />
            </Picker>
          </View>
          <View className='list-item'>
            <View className='list-title'>验收期</View>
            <View className='list-value'>
              <AtImagePicker
                files={files}
                onChange={fileStore.uploadImg.bind(fileStore)}
                onImageClick={fileStore.preview.bind(fileStore)}
              />
            </View>
          </View>
        </View>
        <View className='btn-fixed'>
          <AtButton type='primary' disabled={btnDisabled} onClick={this.submit.bind(this)}>提交</AtButton>
        </View>
      </View>
    )
  }
}

export default Index  as ComponentType
